<template>
	<view>
		<image class="bgimage" src="../../static/images/bgimage1.jpg"></image>	
		<view class="head">
		<image src="../../static/images/head.png"> </image>
		<div class="div">
			<view class="div-div2">
				<view class="div-headline">个人信息</view>
				<view class="">姓名：张三</view>
				<view class="">学号：20190876XX</view>
			</view>
			
		</div>
		
		<view class="">
			<div class="Div">
				<!-- <view class="Div-div2"> -->
					<ul>
						<li class="div-headline li">已预约座位</li>
						<li class="li">教室：教务311</li>
						<li class="li">座位：25号</li>
						<li class="li">申请时间：2021-09-03</li>
						<li class="li">结束时间：2021-09-07</li>
						<li class="li">提前归还天数</li>
						<li class="li-li2"><select name="">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="3">4</option>
			<option value="3">5</option>
			<option value="3">6</option>
		</select></li>
					</ul>
					
			</div>
		</view>
		<view class="tuixuan" @click="tuixuan()"><text>点此进入退选？</text></view>
		<view class="">
			<button class="butt" type="default" @click="onQuit()" @tap="tapPopup">确定归还</button>
		</view>
		
		</view>
		
		<view class="popup" v-show="show">
			<view><text>确定退出吗？</text></view>
			<view class="but2"></view>
				<view><button class="agree" @click="agree()" @tap="affirm">退出</button></view>
				<view><button class="cancel" @click="cancel()" @tap="cancell">再看看</button></view>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rankType:uni.getStorageSync("rankState"),
				show:false,
			};
		},
		onLoad(){
		},
		methods: {
			tuixuan() {
				this.show = false;
				uni.navigateTo({
					url:"/",
					})
			},
			onQuit(){
				
			},
			// 弹窗
			tapPopup() {
				this.show = true;
			},
			// 点击弹窗取消
			cancell() {
				this.show = false;
			},
			// 点击弹窗确认
			affirm() { 
				this.show = false;
				uni.navigateTo({
					url:"/pages/login/login",
					})
			},
			cancel(){
				uni.navigateTo({
					url:"/pages/my/my"
					})
			},
		}
	}
</script>

<style lang="scss">
	
.li{
	list-style: none;
	border-top: 2px lightgray solid;
	border-right: 2px lightgray solid;
	border-left: 2px lightgray solid;
	&-li2{
		border: none;
		list-style: none;
		
	}
}
select{
	
	width:600rpx;
	height: 60rpx;
	border-bottom: 2px lightgray solid;
}
	.bgimage {
		margin-top: 17%;
		background-repeat: no-repeat;
		position: absolute;
		z-index: -1;
		background-size: 100%;
		width: 100%;
		min-height: 90%;
		max-height: 90%;
		opacity: 0.6;
		
	}
  page{
	  z-index: 9998;
  }
  .head{
  	position: relative;
		image{
			float: left;
			left: 10%;
			width: 150rpx;
			height: 150rpx;
			margin-top: 10%;
		}
		.butt{
			margin-bottom: 20rpx;
			width: 60%;
			height: 85rpx;
			background-color: #0099FF;
			color: white;
			border-radius: 35rpx;
			text-align: center;
			font-size: 35rpx;
			box-shadow: darkgray 2px 2px 4px;
			float: left;
			margin-top: 0rpx;
			margin-left: 140rpx;
		}
		.tuixuan {
			margin-bottom: 40rpx;
			float: right;
			text {
				font-size: 35rpx;
				color: #808080;
			}
		}
	}
	
	
	.div{
		height: 180rpx;
		width: 305rpx;
		float: right;
		opacity: 0.6;
		z-index: 10;
		margin-top: 1px;
		margin-right: 200rpx;
		font-size: 100;
			&-headline{
			font-weight: 600;
			padding-bottom: 8rpx;
			}
			&-headline2{
			font-weight: 600;
			
			padding-bottom: 8rpx;
			
			}
			&-div2{
			opacity:1;
			text-align: center;
			z-index: 14;
			font-size: 100;
			padding: 27rpx;
			margin-top: 20%;
			margin-left: 10%;
			z-index: 10;
			height: 180rpx;
			width: 320rpx;
			border: solid lightgrey 3px; 
			background-color: white;
			}
		
	}
	ul{ 
	   width: 600rpx;
		margin-right: 40rpx;
		margin-top: 50rpx;
		opacity:1;
		text-align: center;
		z-index: 14;
		font-size: 600;
		padding-right: 10rpx;
		margin-top: 20%;
		z-index: 10;
		background-color: white;
	}
	.Div{
		height: 430rpx;
		width: 605rpx;
		float: right;
		opacity: 0.6;
		z-index: 10;
		margin-top:70rpx;
		margin-bottom: 100rpx;
		margin-right: 180rpx;
			&-headline{
			font-weight: 600;
			padding-bottom: 8rpx;
			
			}
			&-headline2{
			font-weight: 600;
			padding-top:40rpx;
			padding-bottom: 8rpx;
			
			}
			&-div2{
			
			opacity:1;
			text-align: center;
			z-index: 14;
			font-size: 600;
			padding-right: 10rpx;
			margin-top: 20%;
			z-index: 10;
			height: 540rpx;
			width: 600rpx;
			border: solid lightgrey 3px; 
			background-color: white;
			}
		
	}
	
	
	.popup{
		height: 390rpx;
		background-color: #fcfcfc;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		text-align: center;
		left: 0;
		right: 0;
		position: fixed;
		bottom: 0rpx;
		z-index: 9999;
		text{
			align-items: center;
			justify-content: center;
			display: flex;
			text-align: center;
			font-size: 36rpx;
			padding: 100rpx 0rpx 100rpx 0rpx;
		}
		.but2{
			text-align: center;
			height: 120rpx;
			bottom: 20rpx;
			position: fixed;
			
		}
		.agree,.cancel{
			text-align: center;
			width: 280rpx;
			height: 86rpx;
			font-size: 32rpx;
			border-radius: 20rpx;
		}
		.agree{
			background-color:#e0e0e0;
			position: fixed;
			left: 10%;
		}
		.cancel{
			color: #ffffff;
			background-color:#108ee9;
			position: fixed;
			right: 10%;
		}
	}
</style>

